<template>
  <div class="paper_index">
    <div class="pafe_header">
       <el-page-header @click="goBacK" @back="goBack" content="试卷详情">
      </el-page-header>
    </div>
   
    <el-card class="box-card" :body-style="{ height: '480px' }">
      <!-- 卡片头部 -->
      <template #header>
        <div class="card-header">
          <span
            ><h2>{{ paperDetails.title }}</h2></span
          >
        </div>
        <span class="paper_teacher">老师：{{ paperDetails.teacher }}</span>

        <span class="paper_createtime"
          >创建时间：{{ paperDetails.createTime }}</span
        >
      </template>
      <!-- 卡片主体 -->
      <div class="paper_main">
        <!-- <span>
            用一只黑色的铅笔画一出沉默舞台剧
          </span>
          <el-divider content-position="center">试卷详情</el-divider> -->

        <span>
          考试时间：<b>{{ paperDetails.examTime }}</b> 分钟
        </span>
        <el-divider><i class="el-icon-timer"></i></el-divider>

        <p>
          总分：<b>{{ paperDetails.totalScore }}</b>
        </p>
        <!-- <el-divider><i class="el-icon-thumb"></i></el-divider> -->

        <p>
          及格：<b>{{ paperDetails.passScore }}</b>
        </p>
        <el-divider></el-divider>

        <span>
          <el-rate
            disabled
            :colors="colors"
            v-model="paperDetails.difficulty"
            show-text
            :texts="texts"
            text-color="#000000"
            score-template="{value}"
          >
          </el-rate>
        </span>
        <!-- <el-divider></el-divider> -->

        <h4>
          {{ paperDetails.info }}
        </h4>
        <el-divider></el-divider>

        <el-button plain round class="main_button" @click="beginExam"
          >开始考试</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getPaper } from "../../../api/frontdesk";
import router from "../../../router";
export default {
  data() {
    return {
      paperDetails: {
        name: "",
        teacher: "",
        createTime: "2020-10-12 10:20:30",
        examTime: "", //时间
        difficulty: "", //难度
        totalScore: "", //总分
        passScore: "", //及格分数
        info: "",
      },
      //试卷id
      paperId: "",
      //星星
      colors: ["#67C23A", "#E6A23C", "#FF0000"],
      texts: ["简单", "简单", "中等", "中等", "复杂"],
    };
  },
  methods: {
    async getPaperId() {
      //通过本地存储获取到paperId
      const id = localStorage.getItem("paperId");
      this.paperId = id;
      const result = await getPaper(this.paperId);

      console.log(result);
      this.paperDetails = result.data;
    },
    beginExam() {
      router.push("/question");
    },
    goBacK(){
      router.push("/index");
    }
  },
  created() {
    this.getPaperId();
  },
};
</script>

<style lang="less" scoped>
.card-header {
  text-align: center;
  height: 40px;
  line-height: 40px;
}
.box-card {
  
  width: 880px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  margin-top: 100px;
  .paper_teacher {
    font-size: 14px;
    color: gray;
  }
  .paper_createtime {
    font-size: 14px;
    float: right;
    color: gray;
  }
  .paper_main {
    text-align: center;
    .el-icon-timer {
      font-size: 24px;
    }
    .el-icon-thumb {
      font-size: 24px;
    }
    .main_button {
      margin-top: 70px;
    }
  }
}
.paper_index {
  width: 100%;
}
.pafe_header{
  margin-top: 15px;
  margin-left: 10px;
}
</style>